<template>
  <view class="manage-page u-p-20">
    <view
      class="manage-wrap"
      v-for="(menuItem, menuIndex) in menuDataList"
      :key="menuIndex"
      v-if="menuItem.is_show == '1' && menuItem.status == '1'"
    >
      <roc-title :titleText="menuItem.title"></roc-title>
      <view class="manage-box">
        <view
          class="manage-item"
          v-for="(item, index) in menuItem.children"
          :key="index"
          v-if="item.is_show == '1' && item.status == '1'"
          @click="clickMenu(item)"
        >
          <u-icon :name="item.icon" color="#0062AD" size="66"></u-icon>
          <view class="name">{{ item.title }}</view>
        </view>
      </view>
    </view>
    	<view style="width: 100%;height:var(--window-bottom);"></view>
  </view>
</template>

<script>
	import { getList, getQuery } from '@/api/menu.js';
  export default {
    data() {
      return {
           menuDataList: []
      }
    },
	onLoad() {
	  if (this.$roc.isLogin()) this.getMenuData();
	},
    methods: {
      // 获取用户菜单
      async getMenuData() {
        // 查找 管理菜单id
        const sendObj = {
          search: JSON.stringify({ name: 'tongji' })
        };
        const {
          data: { data: queryData }
        } = await getQuery(sendObj);
        let pid = ''
        if(queryData.length) {
          pid = queryData[0].id
        }else{
          return
        }
        // 请求菜单
        const {
          data: { data }
        } = await getList({ term_type: 2, pid });
        this.menuDataList = data.list;
      },
      // 菜单转跳
      clickMenu(menuItem) {
        const params = {
          menuTitle: menuItem.title,
          menuId: menuItem.id
        };
        // 1-普通 2-审批 3-外链 4-模块 5-按钮 6-系统 7-单图表 8-多图表
        if (menuItem.menu_type == 1) {
          params.modelId = menuItem.model_id;
        } else if (menuItem.menu_type == 2) {
          params.modelId = menuItem.model_id;
          params.flowId = menuItem.flow_id;
        } else if (menuItem.menu_type == 7 || menuItem.menu_type == 8) {
          params.reportId = menuItem.report_id;
        }
        this.$u.route({
          url: menuItem.path,
          params
        });
      }
    }
  }
</script>

<style lang="scss" scoped>
.manage-page {
  .manage-wrap {
    width: 100%;
    margin-bottom: 36rpx;
    .manage-box {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
			margin-top: 20rpx;
      .manage-item {
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 33%;
        height: 158rpx;
        border: 1px solid #ecedef;
				opacity: 1;
				&:active{
					opacity: .5;
				}
        .name {
          padding-top: 10rpx;
          color: #333;
        }
      }
    }
  }
}
</style>
